<template>
  <view class="loading-page">
    <view class="loading-gif" v-if="justRule" :animation="moveAni">
      <view class="loading-page-top" :animation="scaleAni">
        <image class="loading-img" v-show="loadingVisable" src="https://cdc-file.risechina.com/img/2022/1/1641788783438.png" mode="widthFix"></image>
      </view>
    
      <view class="loading-page-middle">
        <image class="img1" v-show="loadingVisable" src="/static/common/image/loading.png" mode="widthFix"></image>
        <image class="img2" src="https://mmbiz.qpic.cn/mmbiz_gif/snDtyORuY5siao2U6iaia4QoV5ocvia9wPrJJp2yH4IAqkUYjy9L7gic5dwtG3dRmAROzQAcrZDdgvllX0s4koFkicZA/0?wx_fmt=gif" mode="widthFix"></image>
        <image class="img4" v-show="msgShow" src="/static/common/image/homePage-title.png" mode="widthFix"></image>
        <image class="img3" src="/static/common/image/logo.png" mode="widthFix"></image>
      </view>
    </view>

    <!-- 规则 -->
    <view class="user-page">
      <view class="btns">
        <button class="btn-share" open-type="share"></button>
        <image class="btn-gift" src="/static/common/image/btn-gift.png" mode="widthFix" @click="goGiftCenter"></image>
      </view>
      <view class="rule">
        <image class="rule-msg" src="/static/common/image/msg.png" mode="widthFix"></image>
      </view>
      <image class="btn-play" src="/static/common/image/btn-play.png" mode="widthFix" @click="goPlay"></image>
      <image class="swiper" src="https://mmbiz.qpic.cn/mmbiz_gif/snDtyORuY5siao2U6iaia4QoV5ocvia9wPrJZI9HYdA5GHQVnp07Pso7zFC86lPvsUuAQn6BEqMS07G8uSLNicSib8fQ/0?wx_fmt=gif" mode="widthFix"></image>
      <image class="logo" src="/static/common/image/logo.png" mode="widthFix"></image>
      <image class="rulebg" src="/static/common/image/rulebg.png" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
import userMixins from "@/mixins/userMixins";
import {ImageLoader} from '@/common/ImageLoader.min.js';
const ImageSource = require('./imageSource.js');

const URLS = [
 
]
export default {
  data() {
    return {
      moveAni: {},
      scaleAni: {},
      loadingVisable: true,
      justRule: true,
      msgShow: false
    };
  },
  mixins: [userMixins],
  onLoad(options) {
    if(options.flag) {
      this.justRule = false
    } else {
      this.preloadImg()
    }
  },
  methods: {
    preloadImg() {
      new ImageLoader({
        base: ImageSource.BASE,
        source: [ImageSource],
        loading: res => {
          // 可以做进度条动画
          console.log(res);
        },
        loaded: res => {
          this.playAnimate()
        }
      })
    },
    playAnimate() {
      // 动画
			this.animation1 = wx.createAnimation({
				duration: 1300,
				timingFunction: 'ease',
				delay: 0
			});
			this.animation2 = wx.createAnimation({
				duration: 1200,
				timingFunction: 'linear',
				delay: 0
			});
      setTimeout(_=>{
        this.msgShow = true;
      },5000)
      setTimeout(_=>{
        this.animation1.height('0').step();
        this.scaleAni = this.animation1.export()
        this.loadingVisable = false;
        setTimeout(_=>{
          this.animation2.translateY('150%').step();
          this.moveAni = this.animation2.export()
        },1500)
      },10000)
    },
    goPlay() {
      uni.navigateTo({ url: '/pages/gameMain/index' });
    },
    goGiftCenter() {
      uni.navigateTo({ url: '/pages/giftCenter/index' });
    }
  }
};
</script>

<style lang="scss" scoped>
.loading-page {
  width: 100vw;
  height: 100vh;
  background-color: #f4313f;
  position: fixed;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .loading-gif {
    width: 100%;
    height: 100%;
    background-color: #f4313f;
    position: absolute;
    top:0;
    left:0;
    border-top: 3px solid rgba(0,0,0,0.01);
    z-index: 1112;
    .loading-page-top {
      height: 246rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      border-radius: 0 0 30rpx 30rpx;
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
      .loading-img {
        width: 80rpx;
        margin-bottom: 25rpx;
      }
    }
    .loading-page-middle {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      position: relative;
      .img1 {
        width: 115rpx;
        margin-top: 30rpx;
      }
      .img2 {
        width: 650rpx;
        margin-top: 160rpx;
        margin-left: -120rpx;
      }
      .img3 {
        width: 238rpx;
        position: absolute;
        bottom: -350rpx;
        left: 260rpx;
      }
      .img4 {
        width: 400rpx;
        position: absolute;
        bottom: -140rpx;
        left: 160rpx;
      }
    }
  }
  .user-page {
    position: relative;
		width: 750rpx;
		height: 1650rpx;
    .rulebg {
      width: 100%;
    }
    .btns {
			position: absolute;
			right: 20rpx;
			top: 200rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			z-index: 1111;
			.btn-share {
				width: 69rpx;
				height: 73rpx;
				background-color: transparent;
				border-radius: 0;
				background: url('/static/common/image/btn-share.png') no-repeat center center;
				background-size: 100%;
				&::after {
					border: none;
				}
			}
			.btn-gift {
				margin-top: 21rpx;
				width: 69rpx;
			}
			.btn-rule {
				margin-top: 21rpx;
				width: 69rpx;
			}
		}
    .rule {
      width: 500rpx;
      height: 330rpx;
      overflow-y: auto;
      position: absolute;
      top: 370rpx;
      left: 127rpx;
      &-msg {
        width: 100%;
      }
    }
    .btn-play {
      width: 300rpx;
      position: absolute;
      bottom: 170rpx;
      left: 230rpx;
    }
    .logo {
      width: 284.5rpx;
      position: absolute;
      top: 100rpx;
      left: 230rpx;
    }
    .swiper {
      width: 550rpx;
      position: absolute;
      bottom: 262rpx;
      left: 100rpx;
      pointer-events: none;
    }
  }
}

</style>
